<template>
	<view>
			<view class="nav" style="margin-top: 13px;">
		<uniNavBar height="65px" left-icon="left" background-color='#FFF' title="粉丝" @clickLeft="back" class="setonl" :border="false" />
		</view>
		<view v-for="(item,index) in Data" class="fensi">
			<div class="imgav">
				<img :src="item.avatar" @click="gouserdeta(item.id)" />
				<div class="nic">{{item.nickname}}</div>
			</div>

			<div class="huiguan" @click="huiguan(item)" v-if="JSON.parse(item.fanslist).indexOf(userid)">回关</div>
			<div class="otherguanzhu" @click="otherguanzhu(item)" v-if="!JSON.parse(item.fanslist).indexOf(userid)">互相关注
			</div>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
	import {
		addfslist,
		followthat,
		remofollow
	} from '@/request/setarticle.js'
	import url from "@/config/index.js"
	import websocketManager from '@/websocketService.js'
	export default {
		data() {
			return {
				userid: this.$store.state.id,
				addfollowlist: {
					nowuserid: this.$store.state.id,
					followid: '',
					type: 'followthat'
				},
				Data: '',
				pram: {
					userid: this.$store.state.id
				}
			};
		},
		components: {
			uniNavBar
		},
		created() {
			this.getaddlist()
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			gouserdeta(e) {
				uni.navigateTo({
					url: `/pages/components/userdetails?userid=${e}` // 注意路径格式  
				});
			},
			//取消关注
			otherguanzhu(item) {
				uni.showModal({
					// title: '提示',
					content: '不再关注该用户',
					success: (res) => {
						if (res.confirm) {
							this.addfollowlist.followid = item.id
							remofollow(this.addfollowlist).then((e) => {
								this.tanxhu()
								this.getaddlist()
							})
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});

			},
			tanxhu() {
				uni.showToast({
					title: '取消关注成功',
					//将值设置为 success 或者直接不用写icon这个参数
					icon: 'none',
					//显示持续时间为 2秒
					duration: 2000
				})
			},
			// 回关事件
			huiguan(item) {
				websocketManager.send(this.addfollowlist);
				this.addfollowlist.followid = item.id
				followthat(this.addfollowlist).then((e) => {
					uni.showToast({
						title: e.msg,
						icon: 'none',
						duration: 2000
					})
					this.getaddlist()
				})
			},
			getaddlist() {
				addfslist(this.pram).then((e) => {
					this.Data = e.data.sendArr
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	.fensi {
		padding: 0.1rem 1rem;
		height: 3.7rem;
		border-bottom: 1px solid #f5f5f5;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.imgav {
			display: flex;
			align-items: center;

			img {
				border-radius: 50%;
				width: 2.5rem;
				height: 2.5rem;
				object-fit: cover;
			}

			.nic {
				font-size: 1rem;
				margin-left: 1rem;
			}
		}

		.huiguan {
			font-size: 0.9rem;
			border: 1px solid #857f7f;
			padding: 0.1rem 0.6rem;
			border-radius: 0.9rem;
		}

		.otherguanzhu {
			color: #857f7f;
			font-size: 0.9rem;
			border: 1px solid #857f7f;
			padding: 0.1rem 0.6rem;
			border-radius: 0.9rem;
		}
	}
</style>